<template lang="html">
    <div class="my">
        <Header>
            <span slot="title">我的个人中心</span>
        </Header>
        <div class="top">
            <mu-avatar :color="dealColor" size="53">{{ headerIcon }}</mu-avatar>
            <div class="info">
                <h2 class="username">{{ username }}</h2>
                <p class="telNum">{{ dealTelNum }}</p>
            </div>
            <div class="aui-right-user">
                <button>
                    <i class="icon icon-vip-one"></i>
                    未认证
                </button>
                <mu-icon value="chevron_right" color="white" size="22" right></mu-icon>
            </div>
        </div>
        <div class="userData">
            <div>
                <h2>{{ invite }}</h2>
                <p>邀请人数</p>
            </div>
            <div>
                <h2>{{ $store.state.product.length }}</h2>
                <p>预约数</p>
            </div>
            <div>
                <h2>{{ currency }}</h2>
                <p>夜郎币</p>
            </div>
            <div>
                <h2>{{ integral }}</h2>
                <p>积分</p>
            </div>
        </div>
        <mu-list>
            <mu-list-item button :ripple="false" v-for="item in list" :key="item.id" :to="item.hash" @click="handler(item.id)">
                <mu-divider></mu-divider>
                <div class="box">
                    <mu-list-item-action>
                    <mu-icon :value="item.icon"></mu-icon>
                    </mu-list-item-action>
                    <mu-list-item-title>{{ item.text }}</mu-list-item-title>
                    <div class="arrow">
                        <mu-icon value="chevron_right"></mu-icon>
                    </div>
                </div>
            </mu-list-item>
            <mu-divider></mu-divider>
        </mu-list>
        <mu-tabs :value="$route.path" center color="teal">
			<mu-tab value="/index" to="/index">
				<mu-icon value="home"></mu-icon>
				首页
			</mu-tab>
			<mu-tab value="/money" to="/money">
				<mu-icon value="local_atm"></mu-icon>
				投资理财
			</mu-tab>
			<mu-tab value="/order" to="/order" >
				<mu-icon value="favorite"></mu-icon>
				投资预约
			</mu-tab>
			<mu-tab value="/my" to="/my">
				<mu-icon value="person_pin"></mu-icon>
				我的
			</mu-tab>
		</mu-tabs>
        <mu-dialog :open="show" title="提示" transition="scale" overlay :overlay-close="false" width="350px" max-width="80%">
            <div class="mu-modal-content">
                <mu-icon value="priority_high" color="yellow" left></mu-icon>
                <div class="mu-modal-inner">
                    您身份未认证，请先认证。
                </div>
            </div>
            <mu-button slot="actions" flat color="primary" textColor="black" @click="close">待会认证</mu-button>
            <mu-button slot="actions" flat color="primary">马上去认证</mu-button>
        </mu-dialog>
    </div>
</template>

<script lang="js">
// 引入Header
import Header from '@/components/Header';
export default  {
    props: [],
    mounted () {

    },
    data () {
        return {
            // 头像背景颜色
            color: '',
            
            // 列表
            list: [
                { id: 1, icon: 'select_all', text: '邀请二维码', hash: 'qrcode' },
                { id: 2, icon: 'group', text: '我的客户', hash: 'invitee' },
                { id: 3, icon: 'assessment', text: '收益统计', hash: '' },
                { id: 4, icon: 'work', text: '我的资产', hash: '' },
                { id: 5, icon: 'assignment_ind', text: '个人基本信息', hash: 'myprofile' },
                { id: 6, icon: 'notifications_paused', text: '风险评测', hash: 'riskassessment' },
                { id: 7, icon: 'card_giftcard', text: '积分兑换商城', hash: 'jifenproduct' },
                { id: 8, icon: 'card_giftcard', text: '设置', hash: 'setting' },
                { id: 9, icon: 'card_giftcard', text: '关于', hash: 'about' },
            ],
            // 未认证提示框显引
            show: false,
            // 用户信息
            username: '',
            phone: '',
            invite: '',
            order: '',
            currency: 0,
            integral: 0,
            // 获取token
            token: localStorage.getItem('token')
        }
    },
    // 计算属性数据
    computed: {
        // 头像随机背景色
        dealColor() {
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
            return 'rgb(' + r + ', ' + g + ', ' + b + ')';
        },
        // 手机号4-7位替换为*
        dealTelNum() {
            return this.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
        },
        // 头像图标
        headerIcon() {
            return this.username.substr(0, 1);
        }
    },
    // 注册组件
    components: { Header },
    // 创建完成后
    created() {
        // 获取localStorage中的数据
        let userInfo = localStorage.getItem('userInfo');
        
        // 如果本地数据不存在 则跳转至登录页面
        if (userInfo) {
            // console.log(213)
            // 将字符串转为json格式
            let userinfo = JSON.parse(userInfo)
            // 更新数据
            this.username = userinfo.username;
            this.phone = userinfo.phone;
            this.invite = userinfo.invite_count;
            this.order = userinfo.book_count;
            this.invite = userinfo.info_finished;
            this.currencty = userinfo.points;
            this.integral = userinfo.info_finished;
        } else {
            // console.log(555)
            this.$router.replace('/login');
        }
    },
    // 方法
    methods: {
        // 关闭
        close() {
            this.show = false;
        },
        // 未认证弹框
        handler(id) {
            if (id === 3 || id === 4) {
                this.show = true;
            }
        }
    }
}


</script>

<style lang="scss">
    .my {
        overflow: hidden;
        .header {
            header {
                .mu-appbar-title {
                    span {
                        display: block;
                        text-align: center;
                    }
                }
            }
        }
        .top {
            padding: 15px;
            display: flex;
            border-bottom: 1px solid #e2e2e2;
            .info {
                flex: 1;
                margin-left: 8px;
                .username {
                    font-size: 16px;
                }
                .telNum {
                    font-size: 14px;
                    margin-top: 5px;
                    color: rgb(153, 153, 153);
                }
            }
            .aui-right-user {
                position: relative;
                padding-left: 2rem;
                button {
                    background: linear-gradient(90deg,#ff722b,#ff9140);
                    background-color: #ff722b;
                    border: none;
                    border-radius: 22px 0 0 22px;
                    position: absolute;
                    right: -15px;
                    top: 1px;
                    color: #fff;
                    padding: .4rem 1.5rem .4rem .5rem;
                    font-size: .9rem;
                    height: 54.78px;
                    width: 96px;
                    .icon {
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        background-size: 18px;
                        margin-right: .3rem;
                        background-image: url('../../public/img/images/ia_100000000.png')
                    }
                }
                .mu-icon {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: -16px;
                }
            }
        }
        .userData {
            display: flex;
            text-align: center;
            margin: 5px 0;
            padding: .5rem 0;
            // border-bottom: 1px solid #E0E0E0;
            div {
                width: 25%;
                flex: 1;
                h2 {
                    font-size: 1rem;
                    margin: .67em 0;
                    color: rgb(255, 87, 34);
                }
                p {
                    font-size: 0.8rem;
                }
            }
        }
        .mu-list {
            padding-bottom: 100px;
            li {
                .mu-item{
                    display: flex;
                    flex-direction: column;
                    padding: 0;
                    .box {
                        display: flex;
                        width: 100%;
                        height: 100%;
                        align-items: center;
                        padding: 0 16px;

                    }
                }
                
            }
        }
        .mu-tabs {
            display: flex;
            justify-content: space-evenly;
            position: fixed;
            bottom: 0;
            left: 0;
        }
    }
    .mu-dialog {
        .mu-dialog-body {
            width: 300px;
            .mu-modal-content {
                width: 100%;
                display: flex;
                align-items: center;
                .mu-icon {
                    margin-right: 8px;
                }
            }
        }
    }
</style>
